<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 查询表单区 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入商品名称" suffix-icon="Search" v-model="queryInfo.name" clearable
            @clear="getGoods" @change="getGoods(-1)">
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="showAddGoodsInfoDialog">添加</el-button>
        </el-col>
      </el-row>
      <!-- 商品列表 -->
      <el-table :data="goodslist" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="商品编号" prop="code"></el-table-column>
        <el-table-column label="商品名称" prop="name"></el-table-column>
        <el-table-column label="商品类别" prop="category.name"></el-table-column>
        <el-table-column label="品牌" prop="brand"></el-table-column>
        <el-table-column label="操作" width="180px">
          <template v-slot="scope">
            <el-button type="primary" icon="Edit" size="mini"
              @click="openEditGoodsDialog(scope.row.id)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页条 -->
      <div v-if="goodslist != null && goodslist.length > 0">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryInfo.curPage" :page-sizes="[5, 10, 20]" :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </el-card>

    <!-- 添加商品信息对话框 -->
    <el-dialog title="添加商品信息" v-model="addGoodsInfoDialogVisible" width="40%" @close="resetAddGoodsInfoForm()">
      <el-form ref="addGoodsInfoFormRef" :model="addGoodsInfoForm" :rules="addGoodsInfoFormRules" label-width="100px"
        class="login-form">
        <!-- 商品类别名称 -->
        <el-form-item prop="name" label="商品名称">
          <el-input v-model="addGoodsInfoForm.name" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <!-- 商品类别 -->
        <el-form-item prop="cid" label="商品类别">
          <el-select style="width: 100%" v-model="addGoodsInfoForm.cid" placeholder="请选择商品类别">
            <el-option v-for="item in catelist" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- 商品编码 -->
        <el-form-item prop="code" label="商品编码">
          <el-input v-model="addGoodsInfoForm.code" placeholder="请输入商品编码"></el-input>
        </el-form-item>
        <!-- 品牌 -->
        <el-form-item prop="brand" label="品牌">
          <el-input v-model="addGoodsInfoForm.brand" placeholder="请输入品牌"></el-input>
        </el-form-item>
        <!-- 数量 -->
        <el-form-item prop="num" label="数量">
          <el-input type="number" min="1" v-model="addGoodsInfoForm.num" placeholder="请输入商品数量"></el-input>
        </el-form-item>
        <!-- 价格 -->
        <el-form-item prop="price" label="价格">
          <el-input type="number" min="0" v-model="addGoodsInfoForm.price" placeholder="请输入商品价格"></el-input>
        </el-form-item>
        <!-- 描述 -->
        <el-form-item prop="intro" label="描述">
          <el-input type="textarea" :rows="4" v-model="addGoodsInfoForm.intro" placeholder="请输入商品描述"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addGoodsInfoDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addGoodsInfo()">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改商品信息对话框 -->
    <el-dialog title="修改商品信息" v-model="editGoodsInfoDialogVisible" width="40%" @close="resetAddGoodsInfoForm()">
      <el-form ref="editGoodsInfoFormRef" :model="editGoodsInfoForm" :rules="editGoodsInfoFormRules" label-width="100px"
        class="login-form">
        <!-- 商品类别名称 -->
        <el-form-item prop="name" label="商品名称">
          <el-input v-model="editGoodsInfoForm.name" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <!-- 商品类别 -->
        <el-form-item prop="cid" label="商品类别">
          <el-select style="width: 100%" v-model="editGoodsInfoForm.cid" placeholder="请选择商品类别">
            <el-option v-for="item in catelist" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- 商品编码 -->
        <el-form-item prop="code" label="商品编码">
          <el-input v-model="editGoodsInfoForm.code" placeholder="请输入商品编码"></el-input>
        </el-form-item>
        <!-- 品牌 -->
        <el-form-item prop="brand" label="品牌">
          <el-input v-model="editGoodsInfoForm.brand" placeholder="请输入品牌"></el-input>
        </el-form-item>
        <!-- 数量 -->
        <el-form-item prop="num" label="数量">
          <el-input type="number" min="1" v-model="editGoodsInfoForm.num" placeholder="请输入商品数量"></el-input>
        </el-form-item>
        <!-- 价格 -->
        <el-form-item prop="price" label="价格">
          <el-input type="number" min="0" v-model="editGoodsInfoForm.price" placeholder="请输入商品价格"></el-input>
        </el-form-item>
        <!-- 描述 -->
        <el-form-item prop="intro" label="描述">
          <el-input type="textarea" :rows="4" v-model="editGoodsInfoForm.intro" placeholder="请输入商品描述"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editGoodsInfoDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editGoodsInfo()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, getCurrentInstance, nextTick } from "vue";

const { proxy } = getCurrentInstance();
// 保存商品列表
const goodslist = ref(null);
// 商品总数
const total = ref(0);
// 封装查询参数
const queryInfo = reactive({
  name: "",
  curPage: 1,
  pageSize: 5,
});
// 控制添加商品对话框是否可见
const addGoodsInfoDialogVisible = ref(false);
// 控制修改商品对话框是否可见
const editGoodsInfoDialogVisible = ref(false);
// 绑定添加商品表单数据
const addGoodsInfoForm = reactive({
  name: "",
  cid: "",
  code: "",
  brand: "",
  num: "",
  price: "",
  intro: "",
});
// 绑定修改商品表单数据
const editGoodsInfoForm = reactive({
  id: "",
  name: "",
  cid: "",
  code: "",
  brand: "",
  num: "",
  price: "",
  intro: "",
});
// 指定添加商品表单被引用时的名称和标识
const addGoodsInfoFormRef = ref(null);
// 指定修改商品表单被引用时的名称和标识
const editGoodsInfoFormRef = ref(null);
// 设置添加商品表单验证规则
const addGoodsInfoFormRules = reactive({
  name: [
    { required: true, message: "请输入商品类别名称", trigger: "blur" },
  ],
  code: [{ required: true, message: "请输入商品编码", trigger: "blur" }],
  cid: [{ required: true, message: "请选择商品类别", trigger: "change" }],
  brand: [{ required: true, message: "请输入品牌", trigger: "blur" }],
  num: [{ required: true, message: "请输入数量", trigger: "blur" }],
  price: [{ required: true, message: "请输入价格", trigger: "blur" }],
});
// 设置修改商品表单验证规则
const editGoodsInfoFormRules = reactive({
  name: [
    { required: true, message: "请输入商品类别名称", trigger: "blur" },
  ],
  code: [{ required: true, message: "请输入商品编码", trigger: "blur" }],
  cid: [{ required: true, message: "请选择商品类别", trigger: "change" }],
  brand: [{ required: true, message: "请输入品牌", trigger: "blur" }],
  num: [{ required: true, message: "请输入数量", trigger: "blur" }],
  price: [{ required: true, message: "请输入价格", trigger: "blur" }],
});

// 商品类别列表
const catelist = ref(null);
// 联网获取商品列表
const getGoods = async (flag) => {
  if (flag == 0 || flag == -1) {
    queryInfo.curPage = 1;
  }
  // 分页获取商品列表
  const { data: res } = await proxy.$axios.get("goods", {
    params: {
      name: queryInfo.name,
      curPage: queryInfo.curPage,
      pageSize: queryInfo.pageSize,
    },
  });
  if (res.code != 0) {
    goodslist.value = [];
    return proxy.$message.error("没有商品记录!");
  }
  goodslist.value = res.goodsInfos;
  total.value = res.total;
};

// pageSize改变事件处理函数
const handleSizeChange = (pageSize) => {
  queryInfo.pageSize = pageSize;
  getGoods();
};

// page改变事件处理函数
const handleCurrentChange = (curPage) => {
  queryInfo.curPage = curPage;
  getGoods();
};

// 打开添加商品信息对话框
const showAddGoodsInfoDialog = async () => {
  console.log("打开添加商品信息对话框");
  const { data: res } = await proxy.$axios.get("categories");
  catelist.value = res.categories;
  await nextTick();
  addGoodsInfoDialogVisible.value = true;
};

// 重置添加商品信息表单
const resetAddGoodsInfoForm = () => { };

// 联网添加商品
const addGoodsInfo = () => {
  addGoodsInfoFormRef.value.validate(async (valid) => {
    if (!valid) return;
    var name = addGoodsInfoForm.name;
    var code = addGoodsInfoForm.code;
    var cid = addGoodsInfoForm.cid;
    var brand = addGoodsInfoForm.brand;
    var num = addGoodsInfoForm.num;
    var price = addGoodsInfoForm.price;
    var intro = addGoodsInfoForm.intro;
    const { data: res } = await proxy.$axios.post(`goods`, {
      name: name,
      code: code,
      cid: cid,
      brand: brand,
      num: num,
      price: price,
      intro: intro,
    });
    if (res.code !== 0) return proxy.$message.error("添加失败!");
    proxy.$message.success("添加成功!");
    getGoods();
    addGoodsInfoDialogVisible.value = false;
  });
};

// 打开修改对话框
const openEditGoodsDialog = async (id) => {
  const { data: res1 } = await proxy.$axios.get("categories");
  catelist.value = res1.categories;
  await nextTick();
  editGoodsInfoDialogVisible.value = true;
  const { data: res2 } = await proxy.$axios.get(`goods/id/${id}`);
  if (res2.code != 0) return proxy.$message.error("获取数据失败!");
  editGoodsInfoForm.id = res2.goodsInfo.id;
  editGoodsInfoForm.name = res2.goodsInfo.name;
  editGoodsInfoForm.code = res2.goodsInfo.code;
  editGoodsInfoForm.cid = res2.goodsInfo.cid;
  editGoodsInfoForm.brand = res2.goodsInfo.brand;
  editGoodsInfoForm.num = res2.goodsInfo.num;
  editGoodsInfoForm.price = res2.goodsInfo.price;
  editGoodsInfoForm.intro = res2.goodsInfo.intro;
};

// 联网修改商品
const editGoodsInfo = () => {
  editGoodsInfoFormRef.value.validate(async (valid) => {
    if (!valid) return;
    var id = editGoodsInfoForm.id;
    var name = editGoodsInfoForm.name;
    var code = editGoodsInfoForm.code;
    var cid = editGoodsInfoForm.cid;
    var brand = editGoodsInfoForm.brand;
    var num = editGoodsInfoForm.num;
    var price = editGoodsInfoForm.price;
    var intro = editGoodsInfoForm.intro;
    const { data: res } = await proxy.$axios.put(`goods`, {
      id: id,
      name: name,
      code: code,
      cid: cid,
      brand: brand,
      num: num,
      price: price,
      intro: intro,
    });
    if (res.code !== 0) return proxy.$message.error("修改失败!");
    proxy.$message.success("修改成功!");
    getGoods();
    editGoodsInfoDialogVisible.value = false;
  });
};

onMounted(() => {
  getGoods();
});


</script>
<style lang="less" scoped></style>
